<template>
	<div>
		<van-sticky>
			<van-nav-bar title="分享" left-arrow @click-left="back" />
		</van-sticky>

		<div class="content" id="pic" ref="addImage" style="position: relative;">
			
			<img src="../../assets/img/logo2.png" style="width: 0.6rem; height: 0.6rem; position: absolute;top: 0.2rem; left: 0.2rem;"
			 alt="">
			<span style="font-size: 0.28rem;  position: absolute;top: 0.3rem; left: 1rem;color: white;font-family: 'bodoni mt';">巨服中国</span>
			<div v-if="!dataURL">
				<div id="imgbox">
					<img v-if='detail.fileUrlList' class="img" :src="detail.fileUrlList[0]" alt="">
				</div>
				<div id="text">

					<p class="goodName">{{detail.goodsName}}</p>
					<p class="money" style="margin-right: 0.15rem;">￥{{money}}</p>
					<img :src="ewm" style="margin: 0.2rem 0 0 0.3rem;" class="ewm" alt="">
					<img class="tximg" style="margin-right: 0.5rem;margin-top: 0.5rem;" :src="my.avatarFile.uriPath" alt="">
					<span class="namess">{{my.nickName}}</span>
					<span class="wxgzh">关注微信公众号：巨服宝官方服务平台</span>
				</div>
				
			</div>
			<!-- <div v-if="dataURL" style="width: 80vw;height: 40vh;"> -->
			<img style="width: 100%; height: 100%; z-index: 999; position: relative;" v-if="dataURL" :src="dataURL" alt="">
			<!-- </div> -->
			
		</div>
		<p class="tips" v-if="dataURL">提示:长按图片保存到本地相册</p>
		<p @click="clickGeneratePicture" v-if="!dataURL" class="button">生成海报</p>
	</div>
</template>

<script>
	import api from "../../api/api.js"
	import html2canvas from 'html2canvas'
	import QRCode from 'qrcode'
	export default {
		data() {
			return {
				dataURL: '',
				firstFlag: true,
				detail: {},
				my: {
					avatarFile: {
						uriPath: ''
					}
				},
				ewm: '',
				ShareCode: '',
				money: ''
			}
		},
		created() {
			this.getData()
			this.money = this.$route.params.money
			this.getMe()
		
		},
		mounted() {
			// this.qrcode()
		},
		methods: {
			back() {
				window.history.go(-1)
			},
			getMe() {
				api.myIndex().then(res => {
					this.my = res.data
				})
			},
			clickGeneratePicture() {
				const _this = this
				setTimeout(() => {
					const opts = {
						// y: window.scrollY,
						backgroundColor: 'transparent',
						useCORS: true, // 允许跨域
						// allowTaint: true
					};
					html2canvas(this.$refs.addImage, opts).then(canvas => {
						let dataURL = canvas.toDataURL("image/png");
						this.dataURL = dataURL;
						if (this.dataURL !== "") {
							// this.dialogTableVisible = true;
						}
					});
					this.$toast('海报已生成')
				}, 1000)
			},
			//    qrcode() {
			// 	   // console.log(this.ShareCode)
			// 	   var code=this.ShareCode.toString()

			//     },
			getData() {
				api.infoByinfo({
					data: {
						id: this.$route.params.id,
					}
				}).then(res => {
					var detail = res.data
					this.detail = detail
					// console.log('detail', this.detail)
					// this.getserve()

				})
				api.getShareQR({}).then(res => {
					// this.ewm=res.data.QRUrl
					this.ShareCode = res.data.ShareCode
					console.log(this.ShareCode)
					var code = this.$route.params.url + '?share=' + this.ShareCode
					QRCode.toDataURL(code.toString())
						.then(url => {
							console.log(url)
							this.ewm = url
						})
						.catch(err => {
							console.error(err)
						})

				})

			},
			// getserve () {
			// 	// console.log('id',this.$route.params.id)
			//   api.projectList({
			//     data: {
			//       id: this.$route.params.id,
			//     }
			//   }).then(res => {

			//     this.projectList = res.data
			//     this.level = this.projectList
			// 	this.projectList.forEach(v => {
			// 	  v.text = v.serviceName
			// 	})
			// 	for(let i=0 ;i<this.projectList.length;i++){
			// 		if()
			// 	}
			//     this.detail = Object.assign({}, this.detail, this.projectList[0])
			// 	console.log('服务',this.detail)
			//   })
			// },
		}
	}
</script>

<style lang="scss">
	.button {
		width: 85%;
		height: 0.9rem;
		background: linear-gradient(96deg,
			rgba(72, 143, 240, 1),
			rgba(51, 130, 239, 1));
		border-radius: 0.15rem;
		font-size: 0.35rem;
		line-height: 0.9rem;
		text-align: center;
		margin: 0 auto;
		color: #fefefe;
		margin-top: 0.8rem;
	}

	.namess {
		font-size: 0.3rem;
		color: #999999;
		clear: both;
		display: inline-block;
		float: right;
		padding-right: 0.5rem;
		margin-top: -0.5rem;
	}
	.wxgzh {
		font-size: 0.25rem;
		color: #777777;
		float: left;
		padding-left: 0.4rem;
		margin-top: 0.1rem;
	}

	#pic {
		width: 6.5rem;
		height: 7.5rem;
		-moz-box-shadow: 2px 2px 5px #cccccc;
		-webkit-box-shadow: 2px 2px 5px #cccccc;
		box-shadow: 2px 2px 5px #cccccc;
		margin: 0 auto;
		border-radius: 0.2rem;
		margin-top: 1rem;
		overflow: hidden;
		background: white;
		#imgbox {
			height: 4rem;
		}

		#text {
			height: 15vh;
			background: white;

			.goodName {
				color: #777777;
				font-size: 0.35rem;
				float: left;
				padding: 0.2rem 0 0 0.4rem;
			}

			.tximg {
				// clear: both;
				display: inline-block;
				float: right;
				margin-right: 0.5rem;
				margin-top: 0.3rem;
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 50%;
			}

			.money {
				color: #ff344c;
				font-size: 0.38rem;
				float: right;
				padding: 0.2rem 0.4rem 0 0;
			}

			.ewm {
				width: 1.8rem;
				height: 1.8rem;
				clear: both;
				display: inline-block;
				float: left;
				margin: 0 0 0 0.28rem;
			}
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.tips {
		color: #999999;
		font-size: 0.32rem;
		margin-top: 0.5rem;
	}
</style>
